<!--
@function: 表格模板列-多项单选，包括单排和多排的排列
@author:HYS
@description:
设置：
numberOfColumns，表示单选的列数，默认为1
radios，单选的配置数组，每一个包括了id和value
border，是否显示方形的边框
fontFactor，一个宽度控制因子，字母和汉字宽度不同需要协调
行为：
选中改变之后，会触发value-change事件，传出参数为radio的id
-->
<template>
  <el-radio-group v-model="selected"  style="display:flex;" @change="onChange">
    <template v-for="radio in radios">
      <el-radio style="width:50%;text-align:center;"
      :label="radio.id">&nbsp;</el-radio>
    </template>
  </el-radio-group>
</template>
<script>

// 计算选项中最长的字符，用来统一radio的宽度
var calcuMaxLength = function(radios) {
  var max = 0;
  radios.forEach((radio)=>{
    radio.value.length > max?(max = radio.value.length):(max);
  });

  return max;
}

export default {
  name:"RadioGroupColumn",
  props:{
    numberOfColumns: {// 列数-这里使用style的宽度来控制显示多少列
      type:Number,
      default:1
    },
    radios:{// 单选选项的配置
      type:Array,
      default:()=>{
        return [];
      }
    },
    border:{// 是否显示选项的边框
      type:Boolean,
      default:true
    },
    fontFactor:{// 控制宽度的因子，因为汉字和字母数字宽度不同，所以需要灵活变动
      type:Number,
      default:16
    },
    selectedOuter:{// 用于从外部传入回显值
      type:[Number,String],
      default:-1
    }
  },
  computed:{
    radioWidth:function() {// 宽度
      // var maxLength = calcuMaxLength(this.radios);

      return 100/this.numberOfColumns;

      // return (maxLength+1) * this.fontFactor;
    }
  },
  watch:{
    "selectedOuter":{
      immediate:true,
      handler:function(){
        // console.log("enter1");
        // console.log("value=",this.selectedOuter);
        if(this.selectedOuter !== null && this.selectedOuter.toString() !== "-1"){
          // console.log("enter2");
          this.selected = this.selectedOuter;
        }
      }
    }
  },
  methods:{
    onChange:function (value) {
      this.$emit('value-change', value);
    },
    setSelected:function(v){
      this.selected = v;
    }
  },
  data(){
    return {
      selected:"-1"// 当前选中的radio的id
    };
  }
}
</script>
<style lang="scss">
</style>
